<template>
  <div>
    <!-- 手风琴折叠面板 -->
    <el-collapse v-model="activeName" accordion @change="handleChange">
      <!-- 为什么充值会员 -->
      <el-collapse-item title="为什么充值会员" name="1">
        <p><strong>1. 解锁高级功能：</strong>会员用户可使用专属高级功能，如：批量上传、智能标签分类、视频自动剪辑、多终端同步等，全面提升视频管理效率。</p>
        <p><strong>2. 享受更高权限：</strong>会员拥有更高的存储空间配额和更快的视频处理速度，支持更大文件上传与高清视频转码，满足专业用户需求。</p>
        <p><strong>3. 无广告观看体验：</strong>成为会员后，可在视频播放过程中享受无广告打扰的纯净观看环境，提升整体使用体验。</p>
        <p><strong>4. 专属技术支持：</strong>会员享有优先客服通道和技术支持服务，遇到问题时可快速获得响应与解决方案。</p>
      </el-collapse-item>

      <!-- 如何充值会员 -->
      <el-collapse-item title="如何充值会员" name="2">
        <p><strong>1. 登录账户：</strong>请先使用您的账号密码登录视频管理器平台。</p>
        <p><strong>2. 进入个人中心：</strong>在首页右上角点击用户头像，选择「个人中心」或「账户设置」，进入会员相关页面。</p>
        <p><strong>3. 选择会员套餐：</strong>根据您的需求选择合适的会员套餐（如：月费会员、年费会员）。</p>
        <p><strong>4. 完成支付：</strong>按照页面提示完成支付流程，支付成功后系统将自动为您升级为会员身份。</p>
      </el-collapse-item>

      <!-- 会员规则 -->
      <el-collapse-item title="会员规则" name="3">
        <p><strong>1. 会员有效期：</strong>会员资格自支付成功后立即生效，按照所选套餐周期（如月费、年费）自动续期。</p>
        <p><strong>2. 套餐变更与取消：</strong>会员可在个人中心修改或取消自动续费设置，取消后将在当前周期结束后停止会员服务。</p>
        <p><strong>3. 权益使用规范：</strong>会员功能需遵守平台使用条款，不得利用高级权限进行非法或违反平台政策的操作。</p>
        <p><strong>4. 规则调整说明：</strong>平台保留对会员规则的最终解释权，并可能根据运营情况调整规则内容，调整将通过公告形式通知用户。</p>
      </el-collapse-item>
    </el-collapse>

    <!-- 充值按钮 -->
    <el-button type="primary" @click="openDrawer" style="margin-bottom: 20px; margin-top: 30px;">立即充值</el-button>

    <!-- 右侧抽屉：模拟充值流程 -->
    <el-drawer
      title="充值会员"
      :visible.sync="drawerVisible"
      direction="rtl"
      size="40%"
      :before-close="handleBeforeClose"
    >
      <div style="padding: 20px;">
        <!-- 步骤条 -->
        <el-steps :active="currentStep" finish-status="success" simple>
          <el-step title="选择套餐"></el-step>
          <el-step title="确认支付"></el-step>
          <el-step title="完成充值"></el-step>
        </el-steps>

        <!-- 步骤一：选择套餐 -->
        <div v-if="currentStep === 0" style="margin-top: 30px;">
          <p>请选择您需要的会员套餐：</p>
          <el-radio-group v-model="selectedPlan">
            <el-radio label="month">月费会员</el-radio>
            <el-radio label="year">年费会员</el-radio>
          </el-radio-group>
        </div>

        <!-- 步骤二：确认支付 -->
        <div v-if="currentStep === 1" style="margin-top: 30px;">
          <p>您选择了：<strong>{{ selectedPlan === 'month' ? '月费会员' : '年费会员' }}</strong></p>
          <p>请确认支付信息。</p>
        </div>

        <!-- 步骤三：完成充值 -->
        <div v-if="currentStep === 2" style="margin-top: 30px;">
          <p>正在处理您的支付请求...</p>
        </div>

        <!-- 操作按钮 -->
        <div style="margin-top: 30px; display: flex; justify-content: center; gap: 16px;">
          <el-button @click="prevStep" v-if="currentStep > 0">上一步</el-button>
          <el-button @click="closeDrawer" v-if="currentStep !== 2">取消</el-button>
          <el-button @click="nextStep" type="primary">{{ currentStep === 2 ? '确认' : '下一步' }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: '1',
      drawerVisible: false, // 控制抽屉是否可见
      currentStep: 0,       // 当前步骤索引
      paymentSuccess: false, // 是否充值成功
      selectedPlan: 'month' // 默认选择月费会员
    };
  },
  methods: {
    handleChange(activeTab) {
      this.$nextTick(() => {
        const tabElement = document.querySelector('.el-collapse-item.is-active');
        if (tabElement) {
          tabElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    },
    openDrawer() {
      this.drawerVisible = true;
      this.currentStep = 0;
      this.paymentSuccess = false;
    },
    nextStep() {
      if (this.currentStep < 2) {
        this.currentStep++;
      } else {
        this.paymentSuccess = true;
        this.$message.success('充值成功！');
        this.closeDrawer();
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--;
      }
    },
    closeDrawer() {
      this.drawerVisible = false;
      this.$message.info('已关闭充值窗口');
    },
    handleBeforeClose(done) {
      if (this.currentStep > 0 && !this.paymentSuccess) {
        this.$confirm('当前操作将关闭充值窗口，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          done(); // 用户确认后关闭
          this.$message.info('已关闭充值窗口');
        }).catch(() => {
          // 用户取消关闭，不执行任何操作
        });
      } else {
        done(); // 已完成充值或未开始，直接关闭
      }
    }
  }
};
</script>

<style scoped>
.el-collapse-item__header {
  font-weight: bold;
  font-size: 15px;
  color: #1a73e8;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e4e4e4;
  padding: 16px;
}

.el-collapse-item__content {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  padding: 10px 16px;
}

p {
  margin-bottom: 12px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .el-collapse-item__header {
    font-size: 16px;
    padding: 14px;
  }
  .el-collapse-item__content {
    font-size: 13px;
    line-height: 1.5;
    padding: 8px 14px;
  }
}
</style>